<template>
  <el-card>
    <el-row class="line-chart" type="flex" justify="space-between" align="middle">
      <span class="title">准时交货率</span>
      <div>
        <el-button type="link" @click="weekstatic()">最近7天</el-button>
        <el-button type="link" @click="monthstatic()">最近30天</el-button>
        <el-date-picker
          v-model="dates"
          type="daterange"
          range-separator="To"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          placeholder="请选择日期"
          format="YYYY/MM/DD"
          value-format="YYYY-MM-DD"
        />
      </div>
    </el-row>
    <div id="deliverLineEchart2" style="width: 100%; height: 510px; margin-top: 20px" />
  </el-card>
</template>

<script setup>
import { onMounted, onUnmounted, watch } from "vue";
import * as echarts from "echarts";
import { getdeliverytrends } from "@/api/data";
import { ref, reactive } from "vue";
let end = new Date();
let start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 6);
const dates = ref([filterTime(start), filterTime(end)]);
const res = {
  infor: "true",
  date: [],
  sumaodatas: [],
  lxdatas: [],
  lxdeliveryorders: [],
  smdeliveryorders: [],
};
const SortNum = (a, b) => {
  return a - b;
};
const getTrendDataInfo = async () => {
  let parmes = {
    startDate: dates.value[0],
    endDate: dates.value[1],
  };
  const result = await getdeliverytrends(parmes);
  if (result.errcode === 0) {
    let data = result.content;

    res.date = data.dates;
    res.sumaodatas = data.sumaodatas;
    res.lxdatas = data.lxdatas;
    res.lxdeliveryorders = data.lxdeliveryorders;
    res.smdeliveryorders = data.smdeliveryorders;
    InitLineEachart("deliverLineEchart2", res);
    // TrendData.value = res.data
  }
};
getTrendDataInfo();
// const chart = ref()
// 初始化图表
let myChart = null;
function InitLineEachart(ele, res) {
  var ordersArr = res.orders;
  var salesArr = res.sales;
  // const ordersArr_ = ordersArr.sort(SortNum)
  // const salesArr_ = salesArr.sort(SortNum)
  const option = {
    // 标题组件，包含主标题和副标题
    title: {
      text: "准时交货指标",
      padding: 5,
      textStyle: {
        color: "#fff",
      },
      left: 20,
      top: 0,
    },
    // 提示框组件  鼠标经过 tip提示
    tooltip: {
      trigger: "axis",
      backgroundColor: "rgba(0, 0, 0, 1)",
      borderColor: "rgba(0, 0, 0, 1)",
      padding: [16, 24],
      textStyle: {
        color: "#fff",
      },
      axisPointer: {
        type: "cross",
        crossStyle: {
          color: "#999",
        },
      },
    },
    // 图例组件
    legend: {
      show: true, // 是否显示图例
      // 边框宽度和内边距属性值为数值，不加单位。
      orient: "horizontal", // 图例的朝向    vertical-垂直显示  horizontal-水平显示
      data: ["领星准时交货量", "速猫准时交货量", "领星准时交货率", "速猫准时交货率"],
      left: 140, // x轴方向取值 left/center/right  具体像素值或百分比
      top: 24, // y轴方向取值 top/center/bottom
      textStyle: {
        // 设置图例文字样式
        color: "#ccc",
        fontSize: 13,
      },
    },
    // 上下左右及大小-设置图表占总面积的地方
    grid: {
      left: "12%", //左侧 y轴内容距离边框的距离（类似padding-left）
      top: "27%", // 与容器顶部的距离
      right: "12%",
      bottom: "10%", // 与容器底部的距离
    },
    // grid坐标系的x轴
    xAxis: [
      {
        type: "category",
        data: res.date,
        axisPointer: {
          type: "shadow",
        },
        axisTick: {
          show: false, // 不显示坐标轴刻度线
        },
      },
    ],
    // grid坐标系的y轴
    yAxis: [
      {
        type: "value",
        name: "订单量",
        min: 0,
        // max: 100,
        // interval: 20,
        splitLine: {
          //分割线配置
          show: true,
          lineStyle: {
            color: "rgb(64, 94, 134)",
            width: 1,
          },
        },
        axisLabel: {
          formatter: "{value}",
        },
      },
      {
        type: "value",
        name: "准时交货率",
        min: 0,
        max: 100,
        interval: 40,
        splitLine: {
          //分割线配置
          show: true,
          lineStyle: {
            color: "rgb(64, 94, 134)",
            width: 1,
          },
        },
        axisLabel: {
          formatter: "{value} %",
        },
      },
    ],
    // 系列列表。每个系列通过 type 决定自己的图表类型
    series: [
      {
        name: "领星准时交货量",
        type: "bar",
        // barWidth: 8, // 柱状图粗细
        // barGap: 8, // 柱图之间的间距
        itemStyle: {
          normal: {
            color: "#FF8C00",
            barBorderRadius: [6, 6, 0, 0],
          },
        },
        tooltip: {
          valueFormatter: function (value) {
            return value;
          },
        },
        data: res.lxdeliveryorders,
      },
      {
        name: "速猫准时交货量",
        type: "bar",
        // barWidth: 8, // 柱状图粗细
        // barGap: 8, // 柱图之间的间距
        itemStyle: {
          normal: {
            color: "#8A2BE2",
            barBorderRadius: [6, 6, 0, 0],
          },
        },
        tooltip: {
          valueFormatter: function (value) {
            return value;
          },
        },
        data: res.smdeliveryorders,
      },
      {
        name: "领星准时交货率",
        type: "line",
        yAxisIndex: 1,
        smooth: true,
        itemStyle: {
          normal: {
            color: "#FF8C00",
            barBorderRadius: [6, 6, 0, 0],
          },
        },
        tooltip: {
          valueFormatter: function (value) {
            return value + " %";
          },
        },
        data: res.lxdatas,
      },
      {
        name: "速猫准时交货率",
        type: "line",
        yAxisIndex: 1,
        smooth: true,
        itemStyle: {
          normal: {
            color: "#8A2BE2",
            barBorderRadius: [6, 6, 0, 0],
          },
        },
        tooltip: {
          valueFormatter: function (value) {
            return value + " %";
          },
        },
        data: res.sumaodatas,
      },
    ],
  };

  var chartDom = document.getElementById(ele);
  myChart = echarts.init(chartDom);
  option && myChart.setOption(option);
}
watch(
  () => dates.value,
  (newValue, oldValue) => {
    getTrendDataInfo();
  }
);
const weekstatic = () => {
  const end = new Date();
  const start = new Date();
  start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
  dates.value = [filterTime(start), filterTime(end)];
};

const monthstatic = () => {
  const end = new Date();
  const start = new Date();
  start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
  dates.value = [filterTime(start), filterTime(end)];
};
const onResize = () => {
  // var opt = myChart.getOption()
  // myChart.clear()
  myChart && myChart.resize();
  console.log(7);
  // myChart.setOption(opt)
};
onMounted(() => {
  // InitLineEachart('deliverLineEchart2', res)
  window.addEventListener("resize", onResize);
});

onUnmounted(() => {
  window.removeEventListener("resize", onResize);
});
function filterTime(time) {
  let date = new Date(time);
  let y = date.getFullYear();
  let m = date.getMonth() + 1;
  m = m < 10 ? "0" + m : m;
  let d = date.getDate();
  d = d < 10 ? "0" + d : d;
  return y + "-" + m + "-" + d;
}
</script>

<style lang="scss" scoped>
.line-chart {
  .title {
    font-size: 18px;
    font-weight: bold;
    color: #000;
  }
}
</style>
